<template>
	<el-dialog :title="title" :visible.sync="dialogVis" :close-on-click-modal="false" width="450px" center @close="handleCancel">
		<div class="sub-page">
			<el-form ref="baseForm" :model="userInfo" :rules="rules" label-width="100px">
				<el-form-item label="所在部门" prop="branch_id">
					<el-select v-model="userInfo.branch_id" placeholder="请选择所在部门">
						<el-option v-for="item in allDepartList" :key="item.branch_id" :label="item.branch_title" :value="item.branch_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="登录手机:" prop="phone">
					<el-input type="text" v-model="userInfo.phone" placeholder="请输入登录手机"></el-input>
				</el-form-item>
				<el-form-item label="登录密码:" prop="password">
					<el-input type="password" v-model="userInfo.password" placeholder="请输入登录密码"></el-input>
				</el-form-item>
				<el-form-item label="用户姓名:" prop="name">
					<el-input type="text" v-model="userInfo.name" placeholder="请输入用户姓名"></el-input>
				</el-form-item>
				<div class="btn-box">
					<el-button class="btn gray" type="primary" @click="handleCancel">取消</el-button>
					<el-button class="btn b-bg" type="primary" @click="handleSure">确认</el-button>
				</div>
			</el-form>
		</div>
	</el-dialog>
</template>
<script>
import { request } from "../assets/js/utils/request";
	export default {
		props: ['isUserDialog','itemData','allDepartList','departInfo','userType'],
		data() {
			return {
				dialogVis: false,
				title: '添加用户',
				userInfo: {
					phone: '',
					password: '',
					name: '',
					branch_id: ''
				},
				rules: {
					branch_id: [{ required: true, message: '请选择部门', trigger: 'change' }],
					password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
					name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
					phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
				}
			}
		},
		methods: {
			handleCancel() {
				this.dialogVis = false
				this.userInfo.phone = ''
				this.userInfo.password = ''
				this.userInfo.name = ''
				this.userInfo.branch_id = ''
				this.$emit('userCancel')
			},
			handleSure() {
				const phoneRegex = /^1[3-9]\d{9}$/;
				if(!phoneRegex.test(this.userInfo.phone)) {
					this.$message({
						message: '请输入正确的手机号',
						type: 'error'
					});
					return false
				}
				if(this.userType == 'edit') {
					const formData = new FormData();
					formData.append('uid',this.itemData.uid)
					formData.append('phone',this.userInfo.phone);
					formData.append('password',this.userInfo.password)
					formData.append('name',this.userInfo.name)
					formData.append('branch_id',this.userInfo.branch_id)
					request({
						url: '/user/lawyer/edit',
						method: 'POST',
						data: formData,
						headers: {
							'Content-Type': 'multipart/form-data'
						},
					}).then(res => {
						if(res.code == 200) {
							this.dialogVis = false
							this.userInfo.phone = ''
							this.userInfo.password = ''
							this.userInfo.name = ''
							this.userInfo.branch_id = ''
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.$emit('userSure')
						} else {
							this.$message.error(res.message);
						}
					})
				} else {
					const formData = new FormData();
					formData.append('phone',this.userInfo.phone);
					formData.append('password',this.userInfo.password)
					formData.append('name',this.userInfo.name)
					formData.append('branch_id',this.userInfo.branch_id)
					request({
						url: '/user/lawyer/create',
						method: 'POST',
						data: formData,
						headers: {
							'Content-Type': 'multipart/form-data'
						},
					}).then(res => {
						if(res.code == 200) {
							this.$emit('userSure')
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.dialogVis = false
						} else {
							this.$message.error(res.message);
						}
					})
				}
			}
		},
		watch: {
			isUserDialog(newVal) {
				this.dialogVis = newVal
				if(this.userType == 'edit') {
					this.title = '编辑用户'
					this.userInfo.phone = this.itemData.phone
					this.userInfo.name = this.itemData.name
					let departItem = this.allDepartList.filter(element => element.branch_title === this.itemData.branch);
					this.userInfo.branch_id = departItem[0].branch_id
				}
				if(this.userType == 'add') {
					this.title = '添加账户'
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/.el-dialog{
        border-radius: 15px;
    }
	/deep/.sub-page{
		.el-select{
			width: 100%;
		}
		// .el-input{
		// 	.el-input__inner{
		// 		height: 32px;
		// 	}
		// }
		.btn-box{
			text-align: center;
			.btn{
				font-size: 14px;
				padding: 0;
				color: #fff;
				width: 96px;
				height: 28px;
				text-align: center;
				line-height: 28px;
				border:none;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
			.gray{
				background: #A6A6A6;
			}
		}
	}
</style>